<script setup>
import {ref, onMounted, computed} from 'vue'
import { useRoute } from 'vue-router'
import PageHeader from "@/components/PageHeader.vue"
import {giftOrderDetailApi} from "@/api/index.js";
const route = useRoute()
const orderInfo = ref({
  address: '',
  addressee_name: '',
  addressee_telphone: '',
  create_time: '', // 下单时间
  delivery: '', // 快递商
  order_sn: '',
  note: '',
  pay_amount: '',
  pay_time: '', // 支付时间
  total_amount: '',
  transport_no: '', // 快递单号
  transport_time: '', // 发货时间
  status: '', // 订单状态
  shop_lists: []
})
const status = computed(() => {
  let label
  switch (orderInfo.value.status) {
    case -1:
      label = '已取消'
      break
    case 0:
      label = '未支付'
      break
    case 1:
      label = '已支付'
      break
    case 3:
      label = '待发货'
      break
    case 4:
      label = '已发货'
      break
    case 5:
      label = '已收货'
      break
    case 6:
      label = '已完成'
      break
    default:
      label = undefined
  }
  return label
})
const getOrderInfo = (order_id) => {
  giftOrderDetailApi({order_id}).then(res => {
    console.log(res)
    orderInfo.value = res
  })
}
onMounted(() => {
  const { id } = route.query
  getOrderInfo(id)
})
</script>

<template>
  <div class="order-detail">
    <PageHeader/>
    <div class="order-info">
      <div class="status">
        <a-tag :bordered="false" color="pink"> {{ status }} </a-tag>
      </div>
      <a-card>
        <div class="address-info">
          <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
          <div class="info">
            <div class="address-name">
              {{ orderInfo.addressee_name }} {{ orderInfo.addressee_telphone}}
            </div>
            <div class="address-detail"> {{ orderInfo.address }} </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="cart-list">
          <div class="cart-shop">
            <div class="good-list">
              <div class="goods-item" v-for="(goods) in orderInfo.item" :key="goods.sku">
                <div class="box">
                  <img :src="goods?.thumb_url" alt="" class="goods-img"/>
                  <div class="goods-info">
                    <div class="goods-name"> {{ goods.goods_name }} </div>
                    <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                    <div class="actions">
                    </div>
                  </div>
                </div>
                <div class="box mt">
                  <div class="goods-price">
                    <div class="new-price"> {{ goods.amount }} </div>
                  </div>
                  <div class="num"> x{{ goods?.num }} </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="order-time">
          <div class="t-item">
            <div class="label"> 订单编号 </div>
            <div class="value"> {{ orderInfo.order_sn }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 下单时间 </div>
            <div class="value"> {{ orderInfo.create_time }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 支付时间 </div>
            <div class="value"> {{ orderInfo.pay_time }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 发货时间 </div>
            <div class="value"> {{ orderInfo.transport_time }} </div>
          </div>
        </div>
      </a-card>
      <a-card>
        <div class="order-time">
          <div class="t-item" v-if="orderInfo.delivery">
            <div class="label"> 配送方式 </div>
            <div class="value"> {{ orderInfo.delivery }} </div>
          </div>
          <div class="t-item" v-if="orderInfo.transport_no">
            <div class="label"> 物流单号 </div>
            <div class="value"> {{ orderInfo.transport_no }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 支付积分 </div>
            <div class="value fh1"> {{ orderInfo.pay_amount }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 订单状态 </div>
            <div class="value"> {{ status }} </div>
          </div>
          <div class="t-item">
            <div class="label"> 备注 </div>
            <div class="value"> {{ orderInfo.note }} </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-detail {
  padding: 40px 0 10px;
  .order-info {
    gap: 16px;
    display: flex;
    flex-direction: column;
    :deep(.ant-card .ant-card-body) {
      padding: 12px;
    }
    .address-info {
      gap: 10px;
      display: flex;
    }
    .cart-list {
      gap: 20px;
      display: flex;
      flex-direction: column;
      .cart-shop {
        .shop-title {
          gap: 10px;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .shop-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }
          .shop-name {
            font-size: 18px;
            font-weight: bold;
          }
        }
        .good-list {
          gap: 10px;
          display: flex;
          flex-direction: column;
          .goods-item {
            gap: 20px;
            display: flex;
            align-items: start;
            padding-left: 10px;
            position: relative;
            .box {
              display: flex;
              align-items: start;
              gap: 20px;
            }
            .goods-img {
              width: 80px;
              height: 100px;
              border-radius: 10px;
            }
            .goods-info {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .ellipsis {
                max-width: 470px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .goods-name {
                max-width: 470px;
                font-size: 16px;
                font-weight: bold;
              }
              .goods-spec, .shop-name {
                color: #999;
              }
              .actions {
                margin-top: 10px;
                .anticon {
                  color: #999;
                  font-size: 20px;
                  cursor: pointer;
                  margin-right: 10px;
                  &:hover {
                    color: var(--primary);
                  }
                }
              }
            }
            :deep(.ant-input-number) {
              width: 40px;
            }
            :deep(.ant-input-number-group-addon) {
              background-color: transparent;
              border: none;
              padding: 0;
            }
            :deep(.ant-input-number-input) {
              text-align: center !important;
            }
            .ant-btn {
              width: 32px;
              height: 32px;
              padding: 0;
              color: #999;
              border: none;
              border-radius: 10px;
              background-color: #f1f1f5;
              display: flex;
              align-items: center;
              justify-content: center;
              &:hover {
                background-color: #e8e8f0;
              }
              .anticon {
                color: #242424;
                font-size: 16px;
              }
            }
            .goods-price {
              color: #999;
              font-size: 14px;
              font-weight: bold;
              display: flex;
              align-items: center;
              gap: 10px;
              .new-price, .old-price {
                white-space: nowrap;
              }
              .new-price {
                color: #f44;
                font-size: 18px;
              }
              .old-price {
                text-decoration: line-through;
              }
            }
          }

          @media (max-width: 750px) {
            .goods-item {
              display: block;
            }
            .mt {
              margin-top: 20px;
              justify-content: space-between;
            }
            .goods-name, .ellipsis {
              max-width: 100%;
            }
          }
        }
      }
    }
    .order-time {
      .t-item {
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label {
          line-height: 40px;
          white-space: nowrap;
        }
        .value {
          word-break: break-all;
        }
        .fh1 {
          color: #f40;
          font-weight: bold;
        }
      }
    }
  }
}
</style>